import React, { Component } from 'react';
import { DragDropContext } from 'react-dnd';
// 引入辅助函数库
import update from 'immutability-helper';
import HTML5Backend from 'react-dnd-html5-backend';
import Card from './Card';
const style = {
	width: 400,
	padding: 80
}
@DragDropContext(HTML5Backend)
export default class DnDDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
			cards: [
				{
					id: 1,
					text: 'Write a cool JS library',
				},
				{
					id: 2,
					text: 'Make it generic enough',
				},
				{
					id: 3,
					text: 'Write README',
				},
				{
					id: 4,
					text: 'Create some examples',
				},
				{
					id: 5,
					text:
						'Spam in Twitter and IRC to promote it (note that this element is taller than the others)',
				},
				{
					id: 6,
					text: '???',
				},
				{
					id: 7,
					text: 'PROFIT',
				},
      ],
    }
  }
  moveCard = (dragIndex, hoverIndex) => {
    const { cards } = this.state;
    // 获取拖拽的元素
    const dragCard = cards[dragIndex];
    // 在hoverIndex元素上添加一个拖拽的元素
    this.setState(
			update(this.state, {
				cards: {
					$splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]],
				},
			}),
		)
  }
  render() {
		const { cards } = this.state;
    return (
      <div style={{...style}}>
				<span>单级拖拽：</span>
        {cards.map((card, i) => (
					<Card
						key={card.id}
						index={i}
						id={card.id}
						text={card.text}
						moveCard={this.moveCard}
					/>
				))}
      </div>
    )
  }
}
